<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组织首页-查看活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        #selectManager {
            width: 80%;
        }

        .find {
            background-color: #4D67F8;
        }

        .layui-layer-page .layui-layer-content {
            overflow: visible !important;
        }

        .cheng {
            background-color: #FB9101;
        }

        .huang {
            background-color: #FCBF5B;
        }

        .hong {
            background-color: #FF7875;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">已通过</li>
                <li>待修改</li>
                <li>未通过</li>
                <li>待审核</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <script type="text/html" id="toolbarDemo1">
                        <div class="layui-btn-container layui-inline">
                            <!-- 单个 -->
                            <button class="layui-btn layui-btn-normal layui-btn-sm"
                                style="background:none;margin-left: 15px;" lay-submit lay-filter="sgchart"
                                data-method="notice"><img style="width:20px" src="../images/statistic.png" alt="">
                            </button>
                        </div>
                        <div class="layui-btn-container layui-inline">
                            <!-- 总体 -->
                            <button class="layui-btn layui-btn-normal layui-btn-sm"
                                style="background:none;padding-left: 3px;" lay-submit lay-filter="charts"
                                data-method="notice"><img style="width:22px" src="../images/statistic2.png" alt="">
                            </button>
                        </div>
                    </script>
                    <table class="layui-show" id="currentTableId1" lay-filter="currentTableFilter1"></table>
                </div>
                <div class="layui-tab-item">
                    <script type="text/html" id="toolbarDemo2">
                        <div class="layui-btn-container layui-inline">
                            <button type="submit" lay-submit lay-filter="data-search-btn2"
                                class="layui-btn layui-btn-sm find">
                                刷新 </button>
                        </div>
                        <div class="layui-btn-container layui-inline">
                            <!-- 总体 -->
                            <button class="layui-btn layui-btn-normal layui-btn-sm"
                                style="background:none;padding-left: 3px;" lay-submit lay-filter="charts"
                                data-method="notice"><img style="width:22px" src="../images/statistic2.png" alt="">
                            </button>
                        </div>
                    </script>
                    <table class="layui-show" id="currentTableId2" lay-filter="currentTableFilter2"></table>
                </div>
                <div class="layui-tab-item">
                    <script type="text/html" id="toolbarDemo3">
                        <div class="layui-btn-container layui-inline">
                            <!-- 总体 -->
                            <button class="layui-btn layui-btn-normal layui-btn-sm"
                                style="background:none;padding-left: 3px;" lay-submit lay-filter="charts"
                                data-method="notice"><img style="width:22px" src="../images/statistic2.png" alt="">
                            </button>
                        </div>
                    </script>
                    <table class="layui-show" id="currentTableId3" lay-filter="currentTableFilter3"></table>
                </div>
                <div class="layui-tab-item">
                    <script type="text/html" id="toolbarDemo4">
                        <div class="layui-btn-container layui-inline">
                            <!-- 总体 -->
                            <button class="layui-btn layui-btn-normal layui-btn-sm"
                                style="background:none;padding-left: 3px;" lay-submit lay-filter="charts"
                                data-method="notice"><img style="width:22px" src="../images/statistic2.png" alt="">
                            </button>
                        </div>
                    </script>
                    <table class="layui-show" id="currentTableId4" lay-filter="currentTableFilter4"></table>
                </div>
            </div>
            <script type="text/html" id="bar1">
                <button class="layui-btn-warm layui-btn layui-btn-normal layui-btn-xs cheng" lay-submit
                    lay-filter="seeact1" data-method="notice" lay-event="seeact2">查看活动详情</button>
                <button class="layui-btn-warm layui-btn layui-btn-normal layui-btn-xs huang" lay-submit
                    lay-filter="seestu1" data-method="notice" lay-event="seestu2">查看参与人员</button>
                <button class="layui-btn-warm layui-btn layui-btn-normal layui-btn-xs hong" type="button"
                    lay-event="seework">下载优秀作品</button>
            </script>
            <script type="text/html" id="bar2">
                <button class="layui-btn-warm layui-btn layui-btn-normal layui-btn-xs cheng" lay-submit
                    lay-filter="seesug1" data-method="notice" lay-event="seesug2">查看修改意见</button>
                <button class="layui-btn-warm layui-btn layui-btn-normal layui-btn-xs huang" lay-submit
                    lay-filter="rewrite1" data-method="notice" lay-event="rewrite2">修改活动策划</button>
            </script>
        </div>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/echarts.js" ,type="text/javascript"></script>
    <script>
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }
        layui.use(['form', 'table', 'element'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            var element = layui.element;
            // $("table").width("100%")
            table.render({
                elem: '#currentTableId1',
                url: '/showMData',
                toolbar: '#toolbarDemo1',
                where: {
                    tab: "1"
                },
                defaultToolbar: ['exports', 'print'],
                cols: [
                    [{
                            field: 'm_name',
                            width: 110,
                            title: '活动组织',
                            sort: true
                        },
                        {
                            field: 'a_name',
                            title: '活动名称',
                            Width: 180,
                        },
                        {
                            field: 's_time',
                            Width: 50,
                            title: '开始时间',
                            sort: true
                        },
                        {
                            field: 'e_time',
                            Width: 10,
                            title: '结束时间',
                            sort: true
                        },
                        {
                            field: 'type',
                            Width: 10,
                            title: '活动类型',
                            sort: true
                        },
                        {
                            field: 's_num',
                            title: '参与人数',
                            Width: 20,
                            sort: true
                        },
                        {
                            field: 'status',
                            width: 90,
                            title: '活动状态',
                        },
                        {
                            field: 'do',
                            width: 320,
                            title: '操作',
                            toolbar: '#bar1'
                        },
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            table.render({
                elem: '#currentTableId2',
                url: '/showMData',
                toolbar: '#toolbarDemo2',
                where: {
                    tab: "2"
                },
                defaultToolbar: ['exports', 'print'],
                cols: [
                    [{
                            field: 'm_name',
                            width: 110,
                            title: '活动组织',
                            sort: true
                        },
                        {
                            field: 'a_name',
                            title: '活动名称',
                            Width: 310,
                        },
                        {
                            field: 's_time',
                            Width: 30,
                            title: '开始时间',
                            sort: true
                        },
                        {
                            field: 'e_time',
                            Width: 30,
                            title: '结束时间',
                            sort: true
                        },
                        {
                            field: 'type',
                            Width: 30,
                            title: '活动类型',
                            sort: true
                        },
                        {
                            field: 'status',
                            width: 100,
                            title: '活动状态',
                        },
                        {
                            field: 'do',
                            width: 300,
                            title: '操作',
                            toolbar: '#bar2'
                        },
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            table.render({
                elem: '#currentTableId3',
                url: '/showMData',
                where: {
                    tab: "3"
                },
                toolbar: '#toolbarDemo3',
                defaultToolbar: ['exports', 'print'],
                cols: [
                    [{
                            field: 'm_name',
                            width: 110,
                            title: '活动组织',
                            sort: true
                        },
                        {
                            field: 'a_name',
                            title: '活动名称',
                            Width: 180,
                        },
                        {
                            field: 's_time',
                            Width: 50,
                            title: '开始时间',
                            sort: true
                        },
                        {
                            field: 'e_time',
                            Width: 10,
                            title: '结束时间',
                            sort: true
                        },
                        {
                            field: 'type',
                            Width: 10,
                            title: '活动类型',
                            sort: true
                        },
                        {
                            field: 'status',
                            width: 100,
                            title: '活动状态',
                        },
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            table.render({
                elem: '#currentTableId4',
                url: '/showMData',
                where: {
                    tab: "4"
                },
                toolbar: '#toolbarDemo4',
                defaultToolbar: ['exports', 'print'],
                cols: [
                    [{
                            field: 'm_name',
                            width: 110,
                            title: '活动组织',
                            sort: true
                        },
                        {
                            field: 'a_name',
                            title: '活动名称',
                            Width: 180,
                        },
                        {
                            field: 's_time',
                            Width: 50,
                            title: '开始时间',
                            sort: true
                        },
                        {
                            field: 'e_time',
                            Width: 10,
                            title: '结束时间',
                            sort: true
                        },
                        {
                            field: 'type',
                            Width: 10,
                            title: '活动类型',
                            sort: true
                        },
                        {
                            field: 'status',
                            width: 100,
                            title: '活动状态',
                        },
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            var active0 = {
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: false, //不显示标题栏
                        closeBtn: false,
                        area: '800px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: '<div id = "chart" style = "color:red;width:700px;height:400px;margin:0 auto;margin-top:35px;"></div>',
                        success: function (layero) {
                            $.get('/showActivity', {
                                status: 7
                            }, function (re) {
                                data = re;
                                console.log(data)
                                var option1 = {
                                    title: {
                                        text: data.data[0].m_name + '活动数据统计',
                                        left: 'center'

                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow'
                                        }
                                    },
                                    toolbox: {
                                        show: true,
                                        orient: 'vertical',
                                        left: 'right',
                                        top: 'center',
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['line', 'bar', 'stack']
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        axisTick: {
                                            show: false
                                        },
                                        data: ['已通过', '待修改',
                                            '未通过', '待审核'
                                        ]
                                    }],
                                    yAxis: [{
                                        type: 'value'
                                    }],
                                    series: [{
                                        type: 'bar',
                                        barGap: 0,
                                        label: {
                                            show: true,
                                            position: 'top'
                                        },
                                        data: [data.count11, data
                                            .count12, data.count13,
                                            data.count14
                                        ]
                                    }]
                                };
                                var allChart = echarts.init(document
                                    .getElementById('chart'));
                                allChart.setOption(option1);
                            })

                        }
                    });
                }
            }
            var active02 = {
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: false, //不显示标题栏
                        closeBtn: false,
                        area: '800px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: '<div id = "sgchart" style = "color:red;width:700px;height:400px;margin:0 auto;margin-top:35px;"></div>',
                        success: function (layero) {
                            $.get('/showActivity', {
                                status: 6,
                            }, function (re) {
                                data = re;
                                console.log(data.data[0].a_name)
                                actname = []
                                attendnum = []
                                for (i = 0; i < data.count; i++) {
                                    actname[i] = data.data[i].a_name
                                }
                                for (i = 0; i < data.count; i++) {
                                    attendnum[i] = data.data[i].s_num
                                }
                                // console.log("actname" + actname)
                                var option2 = {
                                    title: {
                                        text: data.data[0].m_name + '参与活动人数统计',
                                        left: 'center'

                                    },
                                    xAxis: {
                                        type: 'category',
                                        data: actname
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [{
                                        data: attendnum,
                                        type: 'bar',
                                        label: {
                                            show: true,
                                            position: 'top'
                                        },


                                    }]
                                };
                                var allChart = echarts.init(document
                                    .getElementById('sgchart'));
                                allChart.setOption(option2);
                            })

                        }
                    });
                }
            }
            var active1 = {
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: "查看活动详情", //不显示标题栏
                        closeBtn: false,
                        area: '700px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',
                        content: '<iframe src="../sgroup_pages/see_activity.html" frameborder="0" style = "width:700px;height:400px"></iframe>'
                    });
                }
            }
            var active2 = {
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: "查看参与人员", //不显示标题栏
                        closeBtn: false,
                        area: '700px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',
                        content: '<iframe src="../sgroup_pages/see_students.html" frameborder="0" style = "width:700px;height:400px"></iframe>'
                    });
                }
            }
            var active3 = {
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: "查看修改意见", //不显示标题栏
                        closeBtn: false,
                        area: '700px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',
                        content: '<iframe src="../sgroup_pages/see_suggestion.html" frameborder="0" style = "width:700px;height:400px"></iframe>'
                    });
                }
            }
            table.on('tool(currentTableFilter1)', function (obj) {
                if (obj.event === 'seeact2') {
                    var data = obj.data;
                    console.log(data);
                    var aname = obj.data.a_name;
                    console.log(aname);
                    form.on('submit(seeact1)', function (data) {
                        var data2 = data;
                        localStorage.setItem("aname", aname);
                        var othis = $(this),
                            method = othis.data('method');
                        active1[method] ? active1[method].call(this, othis) : '';
                    })
                } else if (obj.event === 'seestu2') {
                    var data = obj.data;
                    console.log(data);
                    var aname = obj.data.a_name;
                    console.log(aname);
                    form.on('submit(seestu1)', function (data) {
                        var data2 = data;
                        console.log(data2);
                        var aname = obj.data.a_name;
                        localStorage.setItem("aname", aname);
                        var othis = $(this),
                            method = othis.data('method');
                        active2[method] ? active2[method].call(this, othis) : '';
                    })
                } else if (obj.event === 'seework') {
                    var aname = obj.data.a_name;
                    // submit();
                    var base64 = localStorage.getItem('base642');
                    blob2 = dataURLtoBlob(base64);
                    console.log(blob2);
                    const blobUrl = window.URL.createObjectURL(blob2);
                    const a = document.createElement('a');
                    a.href = blobUrl;
                    a.download = aname + '优秀材料.zip';
                    a.click();
                }
            });
            table.on('tool(currentTableFilter2)', function (obj) {
                if (obj.event === 'seesug2') {
                    var data = obj.data;
                    console.log(data);
                    var aname = obj.data.a_name;
                    console.log(aname);
                    form.on('submit(seesug1)', function (data) {
                        localStorage.setItem("aname", aname);
                        var othis = $(this),
                            method = othis.data('method');
                        active3[method] ? active3[method].call(this, othis) : '';
                    })
                } else if (obj.event === 'rewrite2') {
                    var data = obj.data;
                    var aname = obj.data.a_name;
                    console.log(aname);
                    localStorage.setItem("aname", aname);
                    // var othis = $(this),
                    //     method = othis.data('method');
                    // active4[method] ? active4[method].call(this, othis) : '';
                    var index = layer.open({
                        title: '编辑策划',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../sgroup_pages/edit_activity.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                }
            });
            form.on('submit(charts)', function (data) {
                // var result2 = JSON.stringify(data.field.quiz);
                var othis = $(this),
                    method = othis.data('method');
                active0[method] ? active0[method].call(this, othis) : '';
            })
            form.on('submit(sgchart)', function (data) {
                // var result2 = JSON.stringify(data.field.quiz);
                var othis = $(this),
                    method = othis.data('method');
                active02[method] ? active02[method].call(this, othis) : '';
            })
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field.quiz);
                var mid = result.split(",")[1];
                localStorage.setItem("mid", mid);
                //执行搜索重载
                table.reload('currentTableId1', {
                    page: {
                        curr: 1
                    },
                    where: {
                        searchParams: result,
                        tab: "1"
                    }
                }, 'data');
                return false;
            });
            form.on('submit(data-search-btn2)', function (data) {
                var result = JSON.stringify(data.field.quiz2);
                //执行搜索重载
                table.reload('currentTableId2', {
                    page: {
                        curr: 1
                    },
                    where: {
                        searchParams: result,
                        tab: "2"
                    }
                }, 'data');
                return false;
            });
            form.on('submit(data-search-btn3)', function (data) {
                var result = JSON.stringify(data.field.quiz3);
                //执行搜索重载
                table.reload('currentTableId3', {
                    page: {
                        curr: 1
                    },
                    where: {
                        searchParams: result,
                        tab: "3"
                    }
                }, 'data');
                return false;
            });
            form.on('submit(data-search-btn4)', function (data) {
                var result = JSON.stringify(data.field.quiz4);
                //执行搜索重载
                table.reload('currentTableId4', {
                    page: {
                        curr: 1
                    },
                    where: {
                        searchParams: result,
                        tab: "4"
                    }
                }, 'data');
                return false;
            });

            /**
             * toolbar监听事件
             */
            // table.on('toolbar(currentTableFilter)', function (obj) {
            //     if (obj.event === 'add') { // 监听添加操作
            //         var index = layer.open({
            //             title: '添加用户',
            //             type: 2,
            //             shade: 0.2,
            //             maxmin: true,
            //             shadeClose: true,
            //             area: ['100%', '100%'],
            //             content: '../page/table/add.html',
            //         });
            //         $(window).on("resize", function () {
            //             layer.full(index);
            //         });
            //     } else if (obj.event === 'delete') { // 监听删除操作
            //         var checkStatus = table.checkStatus('currentTableId1'),
            //             data = checkStatus.data;
            //         layer.alert(JSON.stringify(data));
            //     }
            // });

            //监听表格复选框选择
            // table.on('checkbox(currentTableFilter)', function (obj) {
            //     console.log(obj)
            // });

            // table.on('tool(currentTableFilter)', function (obj) {
            //     var data = obj.data;
            //     if (obj.event === 'edit') {

            //         var index = layer.open({
            //             title: '编辑用户',
            //             type: 2,
            //             shade: 0.2,
            //             maxmin: true,
            //             shadeClose: true,
            //             area: ['100%', '100%'],
            //             content: '../page/table/edit.html',
            //         });
            //         $(window).on("resize", function () {
            //             layer.full(index);
            //         });
            //         return false;
            //     } else if (obj.event === 'delete') {
            //         layer.confirm('真的删除行么', function (index) {
            //             obj.del();
            //             layer.close(index);
            //         });
            //     }
            // });

        });
    </script>

</body>

</html>